<script setup>
import { useAppStore } from '@/stores'
import { Login, Register, ResetPwd } from './components'

const appStore = useAppStore()
const formType = ref('login')
const formComponets = {
  login: Login,
  register: Register,
  resetPwd: ResetPwd
}

const appName = import.meta.env.VITE_APP_NAME
</script>

<template>
  <n-el class="wh-full flex-center" style="background-color: var(--body-color)">
    <div class="fixed top-40px right-40px text-lg">
      <DarkModeSwitch />
    </div>
    <n-el class="p-4xl h-full w-full sm:w-450px sm:h-700px" style="background: var(--card-color); box-shadow: var(--box-shadow-1)">
      <div class="w-full flex flex-col items-center">
        <img src="@/assets/sun_bigger.svg" alt="" class="text-6em" />
        <n-h3 style="margin-bottom: 40px">{{ appName }}</n-h3>
        <transition name="fade-slide" mode="out-in">
          <component :is="formComponets[formType]" v-model="formType" class="w-85%" />
        </transition>
      </div>
    </n-el>
    <div />
  </n-el>
  <n-layout-footer v-if="appStore.showFooter" bordered position="absolute" class="h-40px flex-center">
    {{ appStore.footerText }}
  </n-layout-footer>
</template>
